嗯嗯，html5提供了details, summary, menu, command這四個標籤，作為使用者互動的UI元件。details可以再點選後提供更詳細資訊，menu則可以構成toolbar或context menu（透過滑鼠右鍵跳出）...但是今天測試一下，發現目前瀏覽器都還沒有真正在UI上支援。不過還是稍微介紹一下。
details 與 summary
從html5的文件介紹中，可以知道details與summary主要是用一個點選後展開的block元件來提供詳細資訊，summary是details下的子元件，裡面的內容會在details未展開時就呈現。details有一個open屬性，他的值是boolean，在標籤中指定了open屬性時，這個details區塊預設就會是展開的。

在html5文件的4.11.2 The summary element之前，有一個範例解說，可以簡單地看出規格要求的效果。基於版權，不太好在這裡引用，有興趣的話還是上規格書看一看吧。

menu 與 command
在html中要做出各種選單是很複雜的，需要靠大量的CSS與Javascript才能實作。html5中制定了menu與command標籤，讓我們可以利用標籤就可以組織出選單。（不過目前瀏覽器還不支援他的視覺呈現，所以我只能簡單介紹，沒有辦法實測）

menu標籤可以定義複雜的選單結構。要定義一個toolbar，需要將最外層的menu元件的type屬性指定為"toolbar"，子選單可以利用label屬性來指定顯示的名稱。用Windows的小算盤來舉例：

像這樣的toolbar選單，就可以用以下的html語法來定義：

 <menu type="toolbar">
 	<menu label="編輯(E)">
 		<command label="複製(C)			Ctrl+C">
 		<command label="貼上(P)			Ctrl+V">
 	</menu>
 	<menu label="檢視(V)">
 		<command type="radio" radiogroup="viewtype" label="標準型(T)" onclick="">
 		<command type="radio" radiogroup="viewtype" label="工程型(S)" onclick="" checked>
 		<hr>
 		<command type="radio" radiogroup="digittype" label="十六進位(H)		F5" onclick="">
 		<command type="radio" radiogroup="digittype" label="十進位(D)			F6" onclick="" checked>
 		<command type="radio" radiogroup="digittype" label="八進位(O)			F7" onclick="">
 		<command type="radio" radiogroup="digittype" label="二進位(B)			F8" onclick="">
 		<hr>
 		<command type="radio" radiogroup="numset" label="Degrees(E)			F2" onclick="" checked>
 		<command type="radio" radiogroup="numset" label="Radians(R)			F3" onclick="">
 		<command type="radio" radiogroup="numset" label="Grads(G)				F4" onclick="">
 		<hr>
 		<command label="數字分位(I)" onclick="">
 	</menu>
 	<menu label="說明(H)">
 		<command label="說明主題(H)" onclick="">
 		<hr>
 		<command label="關於小算盤(A)" onclick="">
 	</menu>
 </menu>

...不過顯示不出來就是了

真的想看結果：

總之就是三條黑線

menu有以下屬性：
* type：可以使用的值有'toolbar', 'context', 'list'。'toolbar', 'context'代表選單會以一般功能列選單、滑鼠右鍵跳出的選單的方式呈現。指定為'list'時，裡面的元素包含li，就可以用ul標籤的方式呈現。如果裡面內容沒有li標籤，html5只規定要用[http://www.w3.org/TR/html5/content-models.html#flow-content flow content]的模式呈現
* label：作為sub menu使用時，可以指定要出現的標籤文字

command有以下屬性：
* type：可以使用的值有'command', 'radio', 'checkbox'，'command'是預設，可以不指定，指定成radio的話，他會以radio方式呈現，checkbox也是一樣。
* label：要出現的標籤文字
* icon：如果要在標籤文字前顯示icon，可以指定圖檔的url
* disabled：這是boolean值，在標籤中指定這個屬性的話，command應該會無法操作
* checked：如果type是radio或checkbox的話，選單出現時就會是已點選的
* radiogroup：如果type是radio，用這個就可以把radio組成群組，每次點選都只能在這個群組選擇一個（單選）

反正沒畫面，我就不再多說，沒辦法測試...

明天來先初步測試一下表單(form)好了。

參賽文章